<template>
  <div class="post_content">
    <div class="post_card" v-for="index in 15" :key="index" style="background-color: #ff7f50;">
      <!-- 左侧：头像和作者名称 -->
      <div class="post_left">
        <div class="img">
          <img :src="getAvatar(index)" alt="头像" />
        </div>
        <span class="author">{{ getAuthor(index) }}</span>
      </div>
      <!-- 中间：帖子标题和发布时间 -->
      <div class="post_middle">
        <h3 class="title">{{ getTitle(index) }}</h3>
        <span class="time">{{ getTime(index) }}</span>
      </div>
      <!-- 右下角：点赞和评论数量 -->
      <div class="post_right">
        <span class="like">{{ getLikes(index) }} 赞</span>
        <span class="comment">{{ getComments(index) }} 评论</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// 最热门页面
// 虚拟数据生成函数
const getAvatar = (index) => {
  const avatars = [
    'https://blog-lqj-1331162601.cos.ap-guangzhou.myqcloud.com/avatar_image%2F749e825a-e4a8-4194-8b6c-6b3b65429a8f.gif',
    'https://blog-lqj-1331162601.cos.ap-guangzhou.myqcloud.com/avatar_image%2F020ac915-44cd-43b3-ad5c-2d1895a85d7a.gif',
    'https://blog-lqj-1331162601.cos.ap-guangzhou.myqcloud.com/avatar_image%2F8963d8d5-bbae-413b-be89-8dbea6ef49cb.jfif2',
  ]
  return avatars[index % avatars.length]
}

const getAuthor = (index) => {
  const authors = ['张三', '李四', '王五']
  return authors[index % authors.length]
}

const getTitle = (index) => {
  const titles = [
    '这是一个帖子标题',
    'Vue 3 入门教程',
    '如何实现动态组件',
    '前端开发技巧分享',
  ]
  return titles[index % titles.length]
}

const getTime = (index) => {
  const times = ['1小时前', '2天前', '3周前']
  return times[index % times.length]
}

const getLikes = (index) => {
  return Math.floor(Math.random() * 100) // 随机点赞数
}

const getComments = (index) => {
  return Math.floor(Math.random() * 50) // 随机评论数
}
</script>

<style scoped>
/*博客卡片容器样式*/
.post_content {
  width: 100%;
  height: 80%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;
  gap: 10px;
  padding: 10px;
  background-color: white;
  position: relative;
  top: 10%;
}

/*博客卡片的样式*/
.post_card {
  width: calc(28% - 10px);
  height: 150px; /* 卡片高度 */
}

.post_content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
}

.post_card {
  width: calc(33.33% - 10px);
  height: 150px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post_left {
  display: flex;
  align-items: center;
}

.img {
  width: 40px; /* 头像大小 */
  height: 40px; /* 头像大小 */
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.author {
  font-size: 14px;
  font-weight: bold;
}

.post_middle {
  flex: 1;
  margin: 10px 0;
}

.title {
  font-size: 16px;
  margin: 0;
  color: #333;
}

.time {
  font-size: 12px;
  color: #999;
}

.post_right {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.like,
.comment {
  font-size: 12px;
  color: #666;
}
</style>
